<!-- 银行卡列表 -->
<template>
	<view class="container">
		<view class="list-box">
			<view @tap="unbind(item.id,index)" :class="index%2 ==0?'active':''" class="list-item" v-for="(item,index) in list" :key="index">
				<text class="bankName">{{item.bank_name}}</text>
				<view class="cardNum">●●●● ●●●● ●●●● <text>{{item.bank_number.substr(-4)}}</text></view>
				<image src="../../../../static/images/center/yinlian.png" mode=""></image>
			</view>
		</view>
		<view class="addCard" @tap="goAdd">
			<image src="../../../../static/images/public/plus.png" mode=""></image>
			<text>添加银行卡</text>
		</view>
	</view>
</template>

<script>
	import {
		bankList,
		bankUnbind
	} from "@/api/user.js"
	export default {
		data() {
			return {
				list: []
			}
		},
		onShow() {
			bankList().then(res => {
				this.list = res.data
			})
		},
		methods: {
			goAdd() {
				if (!uni.getStorageSync("userInfo").is_checked) {
					uni.showModal({
						content: "绑定银行卡需实名认证",
						confirmText: "去认证",
						cancelText: "取消",
						confirmColor: "#57BE6A",
						success(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: "/pages/center/accountSet/certification/certification?backurl=true"
								})
							} else if (res.cancel) {}
							
						}
					})
					return
				}
				uni.navigateTo({
					url: "/pages/center/accountSet/bank/addBank"
				})
			},
			unbind(id,index) {
				let _this =this
				uni.showModal({
					content: "解除绑定",
					confirmColor:"#57BE6A",
					success(res) {
						if (res.confirm) {
							uni.showLoading({
								mask:true
							})
							bankUnbind({
								id:id
							}).then(res => {
								uni.hideLoading()
								_this.list.splice(index,1)
								uni.showToast({
									title:"解绑成功"
								})
							})
						}
					}
				})
				
			}
		}
	}
</script>

<style lang="less" scoped>
	.container {
		padding: 0 30rpx 60rpx;

		.list-box {
			.list-item {
				position: relative;
				color: #fff;
				width: 690rpx;
				height: 300rpx;
				box-sizing: border-box;
				padding: 40rpx;
				margin-top: 30rpx;
				background: #DA3B3B;
				border-radius: 10rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.bankName {
					font-size: 42rpx;
				}

				.cardNum {
					// text-align: justify;
					font-size: 36rpx;
					font-weight: bold;
					text{
						margin-left: 20rpx;
						font-size: 50rpx;
					}
				}

				image {
					position: absolute;
					right: 30rpx;
					top: 30rpx;
					width: 149rpx;
					height: 132rpx;
				}
			}

			.active {
				background: rgba(15, 101, 167, 1);
			}
		}

		.addCard {
			width: 690rpx;
			height: 180rpx;
			line-height: 100rpx;
			box-sizing: border-box;
			padding: 40rpx;
			margin-top: 30rpx;
			border-radius: 10rpx;
			box-shadow: 0px 0px 15rpx 0px rgba(51, 51, 51, 0.15);
			display: flex;
			align-items: center;

			image {
				width: 38rpx;
				height: 38rpx;
				margin-right: 20rpx;
			}

			text {
				font-size: 36rpx;
				color: rgba(51, 51, 51, 1);
			}
		}
	}
</style>
